<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./lib/weui/css/weui.min.css">
    <link rel="stylesheet" href="./lib/weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="./css/upload.css">

</head>

<body>
    <div class="imglist" id="imglist">
        <div class="weui-uploader gd-upload">
            <div class="weui-uploader__bd">
                <div class="weui-uploader__input-box">
                    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                </div>
            </div>
        </div>
    </div>

    <a href="javascript:;" class="gd-upload-btn weui-btn weui-btn_primary">提交</a>


    <script src="./js/jquery-3.2.1.js"></script>
    <!--<script src="./lib/webuploader.js"></script>-->
    <script src="./lib/weui/js/jquery-weui.js"></script>
    <script src="./lib/weui/js/jquery-weui.min.js"></script>
    <script>
        var uploadArr = []; //创建一个空的数组，准备储存图片路径和input框的值
        // 拖拽功能开始
        var imglist = document.getElementById('imglist'); 
        imglist.ondragover=function(){
            $('.gd-upload').css('border','1px dashed #666');
        };
        //拖拽功能结束

        $('#uploaderInput').on('change', function () {
            var file = document.getElementById("uploaderInput").files; //获取所有的图片路径
            for (var i = 0; i < file.length; i++) { //遍历所有的图片，将其转为base64格式，之后拼接字符串输出到页面
                var fr = new FileReader();
                fr.readAsDataURL(file[i]);
                fr.onload = function () {
                    var str = "<div class='imglist-content'>" + "<div class='imglist-content-del'><img src='./icon/icon_del.png'></div>" + "<img class='imglist-content-img' src=" + this.result + ">" + "<input type='text'>" + "<div>";
                    $('.gd-upload').before(str); //让输出的图片是在uploaderInput之前
                    // $('.imglist').prepend(str); 
                };
            }
            $('.gd-upload').css('border','0');
        });
        
        $('.gd-upload-btn').on('click', function () {
            uploadArr = []; //每次提交前重置下数组
            for (var i = 0; i < $('.imglist-content').length; i++) { //遍历所有已经上传的图片
                var obj = {}; //定义一个空的对象
                obj.imgUrl = $('.imglist-content').eq(i).find(".imglist-content-img").attr('src'); //获取图片路径
                obj.upValue = $('.imglist-content').eq(i).find("input").val(); //获取相应图片上的input的值
                uploadArr.push(obj); //添加进数组
            }
            console.log(uploadArr)
        });

        // 删除图片（此功能目前更适用于PC端）
        $('.imglist').on('click', '.imglist-content-del', function () {
            var delIndex = $(this).parent().index();
            var _this = this;
            if (uploadArr.length == 0) {
                $.confirm("确认删除吗", function () {
                    $(_this).parent().remove();
                }, function () {
                    //点击取消后的回调函数
                });
            } else {
                $.confirm("确认删除吗", function () {
                    $(_this).parent().remove();
                    uploadArr.splice(delIndex, 1);
                    console.log(uploadArr);
                }, function () {
                    //点击取消后的回调函数
                });
            }
            
        })
    </script>
</body>

</html>